import React, { useState, useCallback } from 'react'
import { Button, Input, Form, NavBar, NumberKeyboard, Field, Toast } from 'react-vant'
import { Link, useNavigate } from 'react-router-dom'
import { Search } from '@react-vant/icons'
import request, { baseUrl } from '../utils/request'

function Reg() {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const [valuekey, setValuekey] = useState('')
    const [show, setShow] = useState(false)

    //发起ajax请求，校验用户名是否存在
    const checkUser = async (_, value) => {
        const { data } = await request.get('/user/regname', {
            params: {
                username: value
            }
        })
        console.log(data);
        if (data.code === 400) {
            return Promise.reject(new Error(data.msg))
        }

        return Promise.resolve()

    }


    //检验用户手机号是否正确
    const checkPhone = async (_, value) => {
        if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(value)) {
            return Promise.resolve()
        }
        return Promise.reject(new Error('请输入正确的手机号码'))

    }
    //注册成功轻提示
    const onFinish = useCallback(async (values) => {
        // console.log(values)
        const { data } = await request.post('/user/reg', values)
        if (data.code === 200) {
            Toast.success('注册成功')
            navigate('/Login')
        }
    }
        , [])
    return (
        <div className='Login Reg'>

            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='warning' block style={{ border: 'none' }} >
                            注册
                        </Button>
                        <p style={{ marginTop: '20px' }}>已有账户?去<Link to='/login'>登录</Link></p>

                    </div>
                }

            >
                <Form.Item style={{ color: '#ccc', fontSize: ' 20px' }}>
                    欢迎成为 '趣学' 会员
                </Form.Item>
                <Form.Item
                    validateTrigger={['onChange', 'onBlur']}
                    // intro='确保这是唯一的用户名'
                    rules={[{ required: true, message: '请填写用户名' },
                    { validator: checkUser, validateTrigger: "onBlur" }]}
                    name='username'
                    label='用户名'
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item

                    rules={[{ required: true, message: '请填写密码' }]}
                    name='password'
                    label='密码'
                >
                    <Input className='input'
                        placeholder='请输入密码'


                        type='password'

                    />

                </Form.Item >
                <Form.Item
                    validateTrigger={['onChange', 'onBlur']}
                    rules={[{ required: true, message: '请填写手机号' }, {
                        validator: checkPhone, validateTrigger: "onBlur"
                    }]}
                    name='telphone'
                    label='手机号'

                >
                    <Input placeholder='请输入注册手机号'
                        onClick={() => {
                            setShow(!show)
                        }}


                    />
                </Form.Item>
            </Form >

            {/* 弹出带右侧栏的键盘 */}
            < NumberKeyboard
                theme='custom'
                extraKey={['a', 'b']}
                closeButtonText='完成'
                visible={show}
                value={valuekey}
                onChange={(v) => {
                    setValuekey(v)
                    form.setFieldValue('telphone', v)
                }
                }
                onBlur={() => {
                    setShow(false)
                }}
            />
        </div >

    )
}
export default Reg